<script setup lang="ts">
	import { ref, onBeforeMount, watch } from "vue";
	import { formRules } from "./utils/rule";
	import { FormProps } from "./utils/types";
	import ReCol from "@/components/ReCol";
	import { useRenderIcon } from "@/components/ReIcon/src/hooks";
	import Delete from "@iconify-icons/ep/delete";
	import AddFill from "@iconify-icons/ep/plus";
	
	import { useColumns } from "./utils/columns";
	
	import {
		getCustomerListApi
	} from "@/api/baseData";
	
	const props = withDefaults(defineProps<FormProps>(), {
		formInline: () => ({
			title: "新增",
			orderNo: "",
			purchaseOrderId: 0,
			orderType: "",
			productList: null,
			supplierId: "",
			materialList: null,
			materialOptions: null,
			remarks: ""
		})
	});
	
	const { vehicleColumns, productList, vehicleOnAdd, vehicleOnDel } = useColumns(props.formInline);

	const ruleFormRef = ref();
	const newFormInline = ref(props.formInline);
	watch(
	  () => productList.value,
	  newValue => {
	    newFormInline.value.productList = newValue;
	  },
	  { deep: true, immediate: true }
	);
	function getRef() {
		return ruleFormRef.value;
	}
	defineExpose({ getRef });
	const orderTypeOptions = [
		{
			value: 1,
			label: '销售出库'
		},
		{
			value: 2,
			label: '生产领料'
		},
		{
			value: 3,
			label: '其他出库'
		},
		{
			value: 4,
			label: '采购退货'
		}
	]
	const customerOptions = ref()
	const getSupplierData = async() => {
		const res = await getCustomerListApi({page:1, perPage: 9999})
		if(res?.code === 200) {
			customerOptions.value = res.result.list
		}
	}

	onBeforeMount(()=> {
		getSupplierData()
	})
	
</script>

<template>
	<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="auto" style="margin-bottom: 20px;">
		<el-row :gutter="30">
			<re-col :value="6" :xs="24" :sm="24">
				<el-form-item label="出库单号" prop="orderNo">
					<el-input v-model="newFormInline.orderNo" clearable placeholder="请输入出库单号" :maxlength="30"
						disabled />
				</el-form-item>
			</re-col>
			<re-col :value="6" :xs="24" :sm="24">
				<el-form-item label="单据类型" prop="orderType">
					<el-select v-model="newFormInline.orderType" placeholder="请选择单据类型" class="w-full" clearable>
						<el-option v-for="(item, index) in orderTypeOptions" :key="index" :label="item.label"
							:value="item.value" />
					</el-select>
				</el-form-item>
			</re-col>
			<re-col :value="6" :xs="24" :sm="24">
				<el-form-item label="客户" prop="customerId">
					<el-select v-model="newFormInline.customerId" placeholder="请选择客户" class="w-full" clearable>
						<el-option v-for="(item, index) in customerOptions" :key="index" :label="item.name"
							:value="item.customerId" />
					</el-select>
				</el-form-item>
			</re-col>
			<re-col :value="6" :xs="24" :sm="24">
				<el-form-item label="实物编码">
					<el-input
					  v-model="newFormInline.entityCode"
					  clearable
					  placeholder="请输入实物编码"
					/>
				</el-form-item>
				
			</re-col>
			<re-col :value="6" :xs="24" :sm="24">
				<el-form-item label="备注">
					<el-input
					  v-model="newFormInline.remarks"
					  clearable
					  placeholder="请输入备注"
					/>
				</el-form-item>
				
			</re-col>
			<re-col :value="24" :xs="24" :sm="24">
				<pure-table
				  align-whole="center"
				  :header-cell-style="{
				    background: 'var(--el-fill-color-light)',
				    color: 'var(--el-text-color-primary)'
				  }"
				  :data="productList"
				  :columns="vehicleColumns"
				>
				  <template #empty>
					<el-empty description="暂无数据" />
				  </template>
				  <template #material="{scope, $index}">
				  	<el-select v-model="productList[$index].materialId" filterable clearable placeholder="请选择">
				  		<el-option
				  		  v-for="item in newFormInline.materialOptions"
				  		  :key="item.materialId"
				  		  :label="item.name"
				  		  :value="item.materialId"
				  		>
				  		<span style="float: left">{{ item.name }} ({{item.unit.name}})</span>
				  		<!-- <span style="float: right;color: var(--el-text-color-secondary);">{{ item.unit.name }}</span> -->
				  		</el-option>
				  	 </el-select>
				  </template>
				  <template #append>
				    <el-button
				      plain
				      class="w-full my-2"
				      :icon="useRenderIcon(AddFill)"
				      @click="vehicleOnAdd"
				    >
				      添加一行数据
				    </el-button>
				  </template>
				  <template #operation="{ row, $index }">
				    <el-button
				      class="reset-margin"
				      link
				      type="primary"
				      :icon="useRenderIcon(Delete)"
				      @click="vehicleOnDel($index)"
				    />
				  </template>
				</pure-table>
			</re-col>
		</el-row>
	</el-form>
</template>
<style scoped></style>